<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/6/28 0028
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .num_error{  right:0.5rem; top:0; color:#cb1448;}
    </style>
    <title>新增收货地址</title>
    <script>
        $(function($){
            $("#provinceCode option").remove();
            $("#provinceCode").append("<option value=''>"+"请选择省"+"</option>");
            $("#cityCode option").remove();
            $("#cityCode").append("<option value=''>"+"请选择城市"+"</option>");
            $("#districtCode option").remove();
            $("#districtCode").append("<option value=''>"+"请选择区"+"</option>");
            //填充省份下拉选
            $.getJSON("${ctx}/ajax/get_area?parentCode=", function(json){
                for(var i in json){
                    $("#provinceCode").append("<option value='"+json[i].areaCode+"'>"+json[i].areaName+"</option>");
                }
            });
            //省份发生改变时，填充市级下拉选
            $("#provinceCode").change(function () {
                //填充发货地省市名
                $("#addrProvinceName").val($("#provinceCode option:selected").text());
                $("#cityCode option").remove();
                $("#cityCode").append("<option value=''>"+"请选择城市"+"</option>");
                $("#districtCode option").remove();
                $("#districtCode").append("<option value=''>"+"请选择区"+"</option>");
                var provinceCode=$("#provinceCode").val();
                if(provinceCode!=0){
                    $.getJSON("${ctx}/ajax/get_area?parentCode="+provinceCode, function(json){
                        for(var i in json){
                            //alert(json[i].areaName);
                            $("#cityCode").append("<option value='"+json[i].areaCode+"'>"+json[i].areaName+"</option>");}
                    });
                }
            });
            //市份发生改变时，填充区级下拉选
            $("#cityCode").change(function () {
                //填充发货地省市名
                $("#addrProvinceName").val($("#provinceCode option:selected").text());
                $("#districtCode option").remove();
                $("#districtCode").append("<option value=''>"+"请选择区"+"</option>");
                var cityCode=$("#cityCode").val();

                if(cityCode!=0){
                    $.getJSON("${ctx}/ajax/get_area?parentCode="+cityCode, function(json){
                        for(var i in json){
                            //alert(json[i].areaName);
                            $("#districtCode").append("<option value='"+json[i].areaCode+"'>"+json[i].areaName+"</option>");}
                    });
                }
            });
        });
    </script>
    <script>

        function numberForm() {

            document.childForm.submit();
        }
    </script>
</head>
<body>
<div id="check_box">
<form:form modelAttribute="UserShippingAddressModel" method="post"   class="text-form" name="childForm">
    <article class="viewports">
        <ul class="list_item2 c3">
            <li class="odr2_b plr20">
                <form:input path="consigneeName" cssClass="i_text" placeholder="收货人姓名" ></form:input>
                <%--<input class="i_text" type="text" value="" placeholder="收货人姓名">--%>
            </li>
            <form:errors path="consigneeName" cssClass="num_error"></form:errors>
            <li class="odr2_b plr20">
                <form:input path="consigneePhone" cssClass="i_text" type="number" value="" maxlength="11"  placeholder="手机号码" ></form:input>
                <%--<input class="i_text" type="text" value="" placeholder="手机号码">--%>
            </li>
            <form:errors path="consigneePhone" cssClass="num_error"></form:errors>
            <li class="odr2_b plr20">
                <form:input path="zipCode" cssClass="i_text" type="number" value=""   placeholder="邮政编码" ></form:input>
                <%--<input class="i_text" type="text" value="" placeholder="邮政编码">--%>
            </li>
            <form:errors path="zipCode" cssClass="num_error"></form:errors>
            <li class="odr2_b plr20 b-ffffff" >
                                <form:select path="provinceCode" class="s_text">
                                </form:select>
                                <form:select path="cityCode" class="s_text">
                                </form:select>
                                <form:select path="districtCode" class="s_text">
                                </form:select>
                    <span class="r">
                    <i class="ico-30 ico_arrow"></i>
                    </span>
            </li>
                <form:errors path="cityCode" cssClass="num_error"></form:errors>
                <form:errors path="districtCode" cssClass="num_error"></form:errors>
                <form:errors path="provinceCode" cssClass="num_error"></form:errors>
            <li class="odr2_b plr20">
                <form:textarea path="address" cssClass="i_textarea"   placeholder="详细地址" ></form:textarea>
                <%--<textarea class="i_textarea" placeholder="详细地址"></textarea>--%>
            </li>
            <form:errors path="address" cssClass="num_error"></form:errors>
        </ul>
    </article>

    <!--star 底下按钮-->
    <div class="buy_height"></div>
    <div class="p_fotbtn tac">
        <a class="b-ffaa3b cf ptb25" onclick="numberForm();">保存</a>
    </div>
</form:form>
    <!--end 底下按钮-->
    <link href="${ctx}/assets/public_skin/css/city/LArea.css" rel="stylesheet">
    <script src="${ctx}/assets/public_skin/js/city/LAreaData1.js"></script>
    <script src="${ctx}/assets/public_skin/js/city/LAreaData2.js"></script>
    <script src="${ctx}/assets/public_skin/js/city/LArea.js"></script>
    <script>
        var area1 = new LArea();
        area1.init({
            'trigger': '#city_demo', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
            'valueTo': '#value1', //选择完毕后id属性输出到该位置
            'keys': {
                id: 'id',
                name: 'name'
            }, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
            'type': 1, //数据源类型
            'data': LAreaData //数据源
        });
        area1.value=[1,15,3];//控制初始位置，注意：该方法并不会影响到input的value
        var area2 = new LArea();
        area2.init({
            'trigger': '#demo2',
            'valueTo': '#value2',
            'keys': {
                id: 'value',
                name: 'text'
            },
            'type': 2,
            'data': [provs_data, citys_data, dists_data]
        });
    </script>
</div>
</body>
<%--<body>--%>
<%--<article>--%>
            <%--<form:form modelAttribute="UserShippingAddressModel" method="post"   class="text-form" name="childForm">--%>
                <%--<li class="odr" id="user-provinceCode-label"/>--%>
                <%--<li class="odr" id="user-cityCode-label"/>--%>
                <%--<li class="odr" id="user-districtCode-label"/>--%>

            <%--<section class="mt30 odr_b odr_t">--%>
                <%--<h2 class="tit"><i></i>收货地址</h2>--%>
                <%--<form:hidden  path="addressId" value="${currentAddress.addressId}"></form:hidden>--%>
                <%--<ul>--%>
                    <%--<li class="odr" id="user-name-label"><form:input path="consigneeName" cssClass="s_text" placeholder="收货姓名" ></form:input>--%>
                        <%--<form:errors path="consigneeName" cssClass="t_msg"></form:errors>--%>
                    <%--</li>--%>
                    <%--<li class="odr" id="user-phone-label">--%>
                        <%--<form:input path="consigneePhone" cssClass="s_text" type="number" value="" maxlength="11"  placeholder="联系方式" ></form:input>--%>
                        <%--<form:errors path="consigneePhone" cssClass="t_msg"></form:errors></li>--%>
                    <%--<div class="list_item2 p25">--%>
                        <%--<ul class="odr r5">--%>
                            <%--<li class="odr_b" >--%>
                                <%--<form:select path="provinceCode" class="s_text">--%>
                                    <%--<form:option value="">--请选择省--</form:option>--%>
                                <%--</form:select>--%>
                            <%--</li>--%>
                            <%--<li class="odr_b" >--%>
                                <%--<form:select path="cityCode" class="s_text">--%>
                                    <%--<form:option value="">--请选择市--</form:option>--%>
                                <%--</form:select>--%>
                            <%--</li>--%>
                            <%--<li class="odr_b" >--%>
                                <%--<form:select path="districtCode" class="s_text">--%>
                                    <%--<form:option value="">--请选择区--</form:option>--%>
                                <%--</form:select>--%>
                            <%--</li>--%>

                        <%--</ul>--%>
                    <%--</div>--%>
                    <%--<form:errors path="cityCode" cssClass="t_msg"></form:errors>--%>
                    <%--<form:errors path="districtCode" cssClass="t_msg"></form:errors>--%>
                    <%--<form:errors path="provinceCode" cssClass="t_msg"></form:errors>--%>
                    <%--<li class="odr" id="user-address-label">--%>
                        <%--<form:input path="address" cssClass="s_text"  value="" placeholder="详细地址" ></form:input>--%>
                        <%--<form:errors path="address" cssClass="t_msg"></form:errors></li>--%>
                    <%--<label class="checkbox">--%>
                        <%--<input id="isDefault" name="isDefault" type="checkbox" value="1">默认--%>
                    <%--</label>--%>
                <%--</ul>--%>
            <%--</section>--%>
            <%--<div class="plr25 mt30 c"><input class="news_btn r5 fs32" type="submit" value="保存并使用"></input></div>--%>
        <%--</form:form>--%>
     <%--</article>--%>
<%--</body>--%>
</html>

